<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    <link rel="apple-touch-icon" href="favicon.png">
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
    <title>小月农场</title>
    <style type="text/css">

        #base {
            width: 10rem;
            height: 18rem;
            /*top:-0.8rem;*/
            position: absolute;
            /*height: 300px;*/

            <c:if test="${month ==12 or month==1 or month ==2}">background: url('/resource/images/winter.png') no-repeat;</c:if>
            <c:if test="${month ==3 or month==4 or month ==5}">background: url('/resource/images/spring.png') no-repeat;</c:if>
            <c:if test="${month ==6 or month==7 or month ==8}">background: url('/resource/images/summer.png') no-repeat;</c:if>
            <c:if test="${month ==9 or month==10 or month ==11}">background: url('/resource/images/autumn.png') no-repeat;</c:if>
            /*bottom:0;*/
            overflow-y:scroll;
            background-size: 100% 100%;
            /*background-attachment:scroll;*/
        }
        /*#scroll{*/
            /*height: 17rem;*/
            /*overflow-y:scroll;*/
        /*}*/
        .farm-title{
            font-size: 0.45rem;
            color: white;
            position: absolute;
            left: 4.16rem;
            top: 1.08rem;
            width: 1.88rem;
            height: 0.45rem;
        }
        #gift{
            position: absolute;
            left: 0.52rem;
            top: 2.04rem;
            background: url('/resource/images/gift.png') no-repeat;
            width: 1.03rem;
            height: 1.03rem;
            background-size: 100% auto;
        }
        #gift-word{
            position: absolute;
            left: 0.71rem;
            top: 2.84rem;
            background: #6B4A2B;
            border-radius: 7px;
            color: white;
            width: 0.63rem;
            height: 0.27rem;
            font-size: 0.21rem;
            text-align: center;
            background-size: 100% auto;
        }
        #remark{
            position: absolute;
            left: 0.53rem;
            top: 4.76rem;
            background: url('/resource/images/remark.png') no-repeat;
            width: 1.08rem;
            height: 1.08rem;
            background-size: 100% auto;
        }
        #remark-detail{
            position: absolute;
            left: 0.73rem;
            top: 5.53rem;

            /*background: url('/resource/images/food.png') no-repeat;*/
            width: 0.65rem;
            height: 0.3rem;
            color: white;
            font-weight:bold;
            font-size: 0.3rem;
            text-align: center;
            -webkit-text-stroke: 1px #8B314F;
            background-size: 100% auto;
        }
        #chick-round{
            position: absolute;
            left: 0.52rem;
            top: 3.41rem;
            background: url('/resource/images/chick_round.png') no-repeat;
            width: 1.03rem;
            height: 1.03rem;
            background-size: 100% auto;
        }
        #chick-status{
            position: absolute;
            left: 0.64rem;
            top: 4.24rem;
            /*background: white;*/
            /*border: 2px solid #FF573C;*/
            /*border-radius: 7px;*/
            /*color: #FF573C;*/
            /*font-size: 0.21rem;*/
            /*text-align: center;*/
            width: 0.76rem;
            height: 0.27rem;
            background-size: 100% auto;
        }
        /*.pro{*/
            /*border-radius: 7px;*/
        /*}*/
        #wheel{
            position: absolute;
            left: 3.12rem;
            top: 6.75rem;
            background: url('/resource/images/wheel.png') no-repeat;
            width: 2.01rem;
            height: 2.01rem;
            background-size: 100% auto;
        }
        #chick{
            position: absolute;
            left: 3.29rem;
            width: 3.43rem;
            /*height: 4.77rem;*/
            background-size: 100% auto;
        }

        #rice{
            position: absolute;
            left: 6.83rem;
            top: 13.29rem;
            background: url('/resource/images/rice000.png') no-repeat;
            width: 1.72rem;
            height: 1.48rem;
            background-size: 100% auto;
        }
        #bee-left{
            position: absolute;
            left: 0.57rem;
            top: 10.53rem;
            background: url('/resource/images/bee.png') no-repeat;
            width: 0.29rem;
            height: 0.25rem;
            background-size: 100% auto;
        }
        #bee-right{
            position: absolute;
            left: 1.51rem;
            top: 10.04rem;
            background: url('/resource/images/bee.png') no-repeat;
            width: 0.32rem;
            height: 0.27rem;
            background-size: 100% auto;
        }
        #food{
            position: absolute;
            left: 7.57rem;
            top: 15.21rem;
            background: url('/resource/images/food.png') no-repeat;
            width: 1.47rem;
            height: 1.47rem;
            background-size: 100% auto;
        }
        #food-detail{
            position: absolute;
            left: 7.57rem;
            top: 16.40rem;
            /*background: url('/resource/images/food.png') no-repeat;*/
            width: 1.47rem;
            height: 0.36rem;
            color: white;
            font-weight:bold;
            font-size: 0.36rem;
            text-align: center;
            -webkit-text-stroke: 1px #4F2D11;
            background-size: 100% auto;
        }


        /*预加载*/
        <c:if test="${chick.chickPoints<2000 or chick.chickPoints>9600 }">
            #preload-01 { background: url(/resource/images/child000.png) no-repeat -9999px -9999px; }
            #preload-02 { background: url(/resource/images/child001.png) no-repeat -9999px -9999px; }
            #preload-03 { background: url(/resource/images/child002.png) no-repeat -9999px -9999px; }
            #preload-04 { background: url(/resource/images/child010.png) no-repeat -9999px -9999px; }
            #preload-05 { background: url(/resource/images/child011.png) no-repeat -9999px -9999px; }
            #preload-06 { background: url(/resource/images/child012.png) no-repeat -9999px -9999px; }
            #preload-07 { background: url(/resource/images/child013.png) no-repeat -9999px -9999px; }
        </c:if>
        <c:if test="${chick.chickPoints>1600 and chick.chickPoints<4000 }">
        #preload-11 { background: url(/resource/images/child100.png) no-repeat -9999px -9999px; }
        #preload-12 { background: url(/resource/images/child101.png) no-repeat -9999px -9999px; }
        #preload-13 { background: url(/resource/images/child102.png) no-repeat -9999px -9999px; }
        #preload-14 { background: url(/resource/images/child110.png) no-repeat -9999px -9999px; }
        #preload-15 { background: url(/resource/images/child111.png) no-repeat -9999px -9999px; }
        #preload-16 { background: url(/resource/images/child112.png) no-repeat -9999px -9999px; }
        #preload-17 { background: url(/resource/images/child113.png) no-repeat -9999px -9999px; }
        </c:if>
        <c:if test="${chick.chickPoints>3600 and chick.chickPoints<6000 }">
        #preload-21 { background: url(/resource/images/child200.png) no-repeat -9999px -9999px; }
        #preload-22 { background: url(/resource/images/child201.png) no-repeat -9999px -9999px; }
        #preload-23 { background: url(/resource/images/child202.png) no-repeat -9999px -9999px; }
        #preload-24 { background: url(/resource/images/child210.png) no-repeat -9999px -9999px; }
        #preload-25 { background: url(/resource/images/child211.png) no-repeat -9999px -9999px; }
        #preload-26 { background: url(/resource/images/child212.png) no-repeat -9999px -9999px; }
        #preload-27 { background: url(/resource/images/child213.png) no-repeat -9999px -9999px; }
        </c:if>
        <c:if test="${chick.chickPoints>5600 and chick.chickPoints<8000 }">
        #preload-31 { background: url(/resource/images/child300.png) no-repeat -9999px -9999px; }
        #preload-32 { background: url(/resource/images/child301.png) no-repeat -9999px -9999px; }
        #preload-33 { background: url(/resource/images/child302.png) no-repeat -9999px -9999px; }
        #preload-34 { background: url(/resource/images/child310.png) no-repeat -9999px -9999px; }
        #preload-35 { background: url(/resource/images/child311.png) no-repeat -9999px -9999px; }
        #preload-36 { background: url(/resource/images/child312.png) no-repeat -9999px -9999px; }
        #preload-37 { background: url(/resource/images/child313.png) no-repeat -9999px -9999px; }
        </c:if>
        <c:if test="${chick.chickPoints>8600 and chick.chickPoints<10000 }">
        #preload-41 { background: url(/resource/images/child400.png) no-repeat -9999px -9999px; }
        #preload-42 { background: url(/resource/images/child401.png) no-repeat -9999px -9999px; }
        #preload-43 { background: url(/resource/images/child402.png) no-repeat -9999px -9999px; }
        #preload-44 { background: url(/resource/images/child410.png) no-repeat -9999px -9999px; }
        #preload-45 { background: url(/resource/images/child411.png) no-repeat -9999px -9999px; }
        #preload-46 { background: url(/resource/images/child412.png) no-repeat -9999px -9999px; }
        #preload-47 { background: url(/resource/images/child413.png) no-repeat -9999px -9999px; }
        </c:if>
        #preload-100 { background: url(/resource/images/rice001.png) no-repeat -9999px -9999px; }
        #preload-101 { background: url(/resource/images/rice002.png) no-repeat -9999px -9999px; }
        /*动画部分*/
        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }
        #wheel{
            -webkit-transform: rotate(360deg);
            animation: rotation 8s linear infinite;
            -webkit-animation: rotation 8s linear infinite;
        }
        @-webkit-keyframes fly1 {
            0%   {
                position: absolute;
                left:0.57rem; top:10.53rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.29rem;
                height: 0.25rem;
                background-size: 100% auto;
                z-index: 10000;
                }
            25%  {
                position: absolute;
                left:0.59rem; top:10.3rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.29rem;
                height: 0.25rem;
                background-size: 100% auto;
                z-index: 10000;}
            50%  {
                position: absolute;
                left:0.61rem; top:10.2rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.29rem;
                height: 0.25rem;
                background-size: 100% auto;
                z-index: 10000;}
            75%  {
                position: absolute;
                left:0.5rem; top:10.4rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.29rem;
                height: 0.25rem;
                background-size: 100% auto;
                z-index: 10000;}
            100% {
                position: absolute;
                left:0.57rem; top:10.53rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.29rem;
                height: 0.25rem;
                background-size: 100% auto;
                z-index: 10000;}
        }

        #bee-left{
            animation: fly1 2s linear infinite;
            -webkit-animation: fly1 2s linear infinite;
        }

        .flip-horizontal {
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
        }
        @-webkit-keyframes fly2 {
            0%   {
                position: absolute;
                left:1.51rem; top:10.04rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.32rem;
                height: 0.27rem;
                background-size: 100% auto;
                z-index: 10000;}
            25%  { position: absolute;
                left:1.45rem; top:10.14rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.32rem;
                height: 0.27rem;
                background-size: 100% auto;
                z-index: 10000;}
            50%  { position: absolute;
                left:1.47rem; top:10.24rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.32rem;
                height: 0.27rem;
                background-size: 100% auto;
                z-index: 10000;}
            75%  { position: absolute;
                left:1.43rem; top:10.15rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.32rem;
                height: 0.27rem;
                background-size: 100% auto;
                z-index: 10000;}
            100% { position: absolute;
                left:1.51rem; top:10.04rem;
                background: url('/resource/images/bee.png') no-repeat;
                width: 0.32rem;
                height: 0.27rem;
                background-size: 100% auto;
                z-index: 10000;}
        }

        #bee-right{
            animation: fly2 3s linear infinite;
            -webkit-animation: fly2 3s linear infinite;
        }
        @-webkit-keyframes riceEating {
            0%   {
                left: 6.83rem;
                top: 13.29rem;
                background: url('/resource/images/rice000.png') no-repeat;
                width: 1.72rem;
                height: 1.48rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            33%  {
                left: 6.83rem;
                top: 13.29rem;
                background: url('/resource/images/rice001.png') no-repeat;
                width: 1.72rem;
                height: 1.48rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            66%  {
                left: 6.83rem;
                top: 13.29rem;
                background: url('/resource/images/rice002.png') no-repeat;
                width: 1.72rem;
                height: 1.48rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% {
                left: 6.83rem;
                top: 13.29rem;
                background: url('/resource/images/rice000.png') no-repeat;
                width: 1.72rem;
                height: 1.48rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }
        .riceEating{
            animation: riceEating 2s linear 1;
            -webkit-animation: riceEating 2s linear 1;
        }
        .empty{

        }
        @-webkit-keyframes blinkChild0 {
            0%   {
                top: 9.81rem;
                background: url('/resource/images/child000.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            4%  { top: 9.81rem;
                background: url('/resource/images/child001.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            8%  {top: 9.81rem;
                background: url('/resource/images/child002.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            10% { top: 9.81rem;
                background: url('/resource/images/child000.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% { top: 9.81rem;
                background: url('/resource/images/child000.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }

        @-webkit-keyframes blinkChild1 {
            0%   {
                top: 9.74rem;
                background: url('/resource/images/child100.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            4%  { top: 9.74rem;
                background: url('/resource/images/child101.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            8%  {top: 9.74rem;
                background: url('/resource/images/child102.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            10% { top: 9.74rem;
                background: url('/resource/images/child100.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% { top: 9.74rem;
                background: url('/resource/images/child100.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }

        @-webkit-keyframes blinkChild2 {
            0%   {
                top: 9.63rem;
                background: url('/resource/images/child200.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            4%  { top: 9.63rem;
                background: url('/resource/images/child201.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            8%  {top: 9.63rem;
                background: url('/resource/images/child202.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            10% { top: 9.63rem;
                background: url('/resource/images/child200.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% { top: 9.63rem;
                background: url('/resource/images/child200.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }
        @-webkit-keyframes blinkChild3 {
            0%   {
                top: 9.57rem;
                background: url('/resource/images/child300.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            4%  { top: 9.57rem;
                background: url('/resource/images/child301.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            8%  {top: 9.57rem;
                background: url('/resource/images/child302.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            10% { top: 9.57rem;
                background: url('/resource/images/child300.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% { top: 9.57rem;
                background: url('/resource/images/child300.png') no-repeat;
                height:5.01rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }
        @-webkit-keyframes blinkChild4 {
            0%   {
                top: 9.63rem;
                background: url('/resource/images/child400.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            4%  { top: 9.63rem;
                background: url('/resource/images/child401.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            8%  {top: 9.63rem;
                background: url('/resource/images/child402.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            10% { top: 9.63rem;
                background: url('/resource/images/child400.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% { top: 9.63rem;
                background: url('/resource/images/child400.png') no-repeat;
                height:5.05rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }

        .child0blick{
            animation: blinkChild0 2.5s linear infinite;
            -webkit-animation: blinkChild0 2.5s linear infinite;
        }
        .child1blick{
            animation: blinkChild1 2.5s linear infinite;
            -webkit-animation: blinkChild1 2.5s linear infinite;
        }
        .child2blick{
            animation: blinkChild2 2.5s linear infinite;
            -webkit-animation: blinkChild2 2.5s linear infinite;
        }
        .child3blick{
            animation: blinkChild3 2.5s linear infinite;
            -webkit-animation: blinkChild3 2.5s linear infinite;
        }
        .child4blick{
            animation: blinkChild4 2.5s linear infinite;
            -webkit-animation: blinkChild4 2.5s linear infinite;
        }

        @-webkit-keyframes eatChild0 {
            0%   {
                top: 9.81rem;
                background: url('/resource/images/child010.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            12%  {
                top: 9.81rem;
                background: url('/resource/images/child011.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            24%  {
                top: 9.81rem;
                background: url('/resource/images/child012.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            30% {
                top: 9.81rem;
                background: url('/resource/images/child013.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            45% {
                top: 9.81rem;
                background: url('/resource/images/child000.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% {
                top: 9.81rem;
                background: url('/resource/images/child000.png') no-repeat;
                height: 4.77rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }

        @-webkit-keyframes eatChild1 {
            0% {
                top: 9.74rem;
                background: url('/resource/images/child110.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            12% {
                top: 9.74rem;
                background: url('/resource/images/child111.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            24% {
                top: 9.74rem;
                background: url('/resource/images/child112.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            30% {
                top: 9.74rem;
                background: url('/resource/images/child113.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            45% {
                top: 9.74rem;
                background: url('/resource/images/child100.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% {
                top: 9.74rem;
                background: url('/resource/images/child100.png') no-repeat;
                height: 4.84rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }

        @-webkit-keyframes eatChild2 {
            0%   {
                top: 9.63rem;
                background: url('/resource/images/child210.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 15000;
            }
            12%  { top: 9.63rem;
                background: url('/resource/images/child211.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 15000;
            }
            24%  {top: 9.63rem;
                background: url('/resource/images/child212.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            30% { top: 9.63rem;
                background: url('/resource/images/child213.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            45% { top: 9.63rem;
                background: url('/resource/images/child200.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% { top: 9.63rem;
                background: url('/resource/images/child200.png') no-repeat;
                height: 4.95rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }

        @-webkit-keyframes eatChild3 {
            0%   {
                top: 9.63rem;
                background: url('/resource/images/child310.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 15000;
            }
            12%  { top: 9.63rem;
                background: url('/resource/images/child311.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 15000;
            }
            24%  {top: 9.63rem;
                background: url('/resource/images/child312.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            30% { top: 9.63rem;
                background: url('/resource/images/child313.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            45% { top: 9.63rem;
                background: url('/resource/images/child300.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% { top: 9.63rem;
                background: url('/resource/images/child300.png') no-repeat;
                height: 5.01rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }

        @-webkit-keyframes eatChild4 {
            0%   {
                top: 9.63rem;
                background: url('/resource/images/child410.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 15000;
            }
            12%  { top: 9.63rem;
                background: url('/resource/images/child411.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 15000;
            }
            24%  {top: 9.63rem;
                background: url('/resource/images/child412.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            30% { top: 9.63rem;
                background: url('/resource/images/child413.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            45% { top: 9.63rem;
                background: url('/resource/images/child400.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 10000;
            }
            100% { top: 9.63rem;
                background: url('/resource/images/child400.png') no-repeat;
                height: 5.05rem;
                background-size: 100% auto;
                z-index: 10000;
            }
        }


        .eat0blick{
            animation-name:eatChild0;
            animation-duration:2s;
            animation-timing-function:linear;
            animation-delay:0s;
            animation-iteration-count:infinite;

            -webkit-animation-name:eatChild0;
            -webkit-animation-duration:2s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:0s;
            -webkit-animation-iteration-count:infinite;

        }
        .eat1blick{
            animation-name:eatChild1;
            animation-duration:2s;
            animation-timing-function:linear;
            animation-delay:0s;
            animation-iteration-count:infinite;

            -webkit-animation-name:eatChild1;
            -webkit-animation-duration:2s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:0s;
            -webkit-animation-iteration-count:infinite;

        }
        .eat2blick{
            animation-name:eatChild2;
            animation-duration:2s;
            animation-timing-function:linear;
            animation-delay:0s;
            animation-iteration-count:infinite;

            -webkit-animation-name:eatChild2;
            -webkit-animation-duration:2s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:0s;
            -webkit-animation-iteration-count:infinite;

        }
        .eat3blick{
            animation-name:eatChild3;
            animation-duration:2s;
            animation-timing-function:linear;
            animation-delay:0s;
            animation-iteration-count:infinite;

            -webkit-animation-name:eatChild3;
            -webkit-animation-duration:2s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:0s;
            -webkit-animation-iteration-count:infinite;

        }
        .eat4blick{
            animation-name:eatChild4;
            animation-duration:2s;
            animation-timing-function:linear;
            animation-delay:0s;
            animation-iteration-count:infinite;

            -webkit-animation-name:eatChild4;
            -webkit-animation-duration:2s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:0s;
            -webkit-animation-iteration-count:infinite;

        }
        .hide_box{width:8rem;color:#fff;color:#444;background:#fff;box-shadow:1px 2px 2px #555;display:none;}
        .hide_box h4{height:1rem;line-height:1rem;overflow:hidden;background:#f7b64b;color:#fff;padding:0 10px;border:1px solid #e78f08;font-size:0.5rem;border-bottom:1px solid #eaa12a;}
        .hide_box h4 a{width:0.37rem;line-height:0.36rem;_line-height:0.38rem;height:0.36rem;font-family:arial;overflow:hidden;display:block;background:#fff;color:#c77405;float:right;text-align:center;text-decoration:none;margin-top:0.19rem;font-size:0.37rem;font-weight:normal;border-radius:2px;_font-size:0.32rem;}
        /*.hide_box p{padding:30px 10px;font-size:13px;border:1px solid #ccc;}*/
        .word{
            height: 0.8rem;line-height: 0.8rem;font-size:0.36rem;padding-left: 0.5rem;padding-right: 0.5rem;
        }
    </style>
</head>
<body>
<!-- 页面结构写在这里 -->
<div id = "base">


    <p class="farm-title">小月农场</p>
    <div id="gift"></div>
    <div id="gift-word">X ${chick.mature}</div>
    <div id="remark"></div>
    <div id="remark-detail">说明</div>
    <div id="chick-round"></div>
    <div id="chick-status">
        <div class="pro"></div>
        <%--<div class="result"></div>--%>
    </div>
    <div id="wheel"></div>
    <div id="chick" ></div>
    <div id="rice"></div>
<c:if test="${month !=12 and month!=1 and month !=2}">
    <div id="bee-left"></div>
    <div id="bee-right" class="flip-horizontal"></div>
</c:if>
    <div id="food"></div>
    <div id="food-detail">${userPoints.points}</div>
    <!--<img id="gift" src="images/gift.png">-->
    <!--<img id="chick-round" src="images/chick_round.png">-->
    <!--<img id="wheel" src="images/wheel.png">-->
    <!--<img id="chick" src="images/chick.png">-->
    <!--<img id="rice" src="images/rice.png">-->
    <!--<img id="bee-left" src="images/bee.png">-->
    <!--<img id="bee-right" class="flip-horizontal" src="images/bee.png">-->
    <!--<img id="food" src="images/food.png">-->
    <div id="preload-01"></div>
    <div id="preload-02"></div>
    <div id="preload-03"></div>
    <div id="preload-04"></div>
    <div id="preload-05"></div>
    <div id="preload-06"></div>
    <div id="preload-07"></div>
    <div id="preload-11"></div>
    <div id="preload-12"></div>
    <div id="preload-13"></div>
    <div id="preload-14"></div>
    <div id="preload-15"></div>
    <div id="preload-16"></div>
    <div id="preload-17"></div>
    <div id="preload-21"></div>
    <div id="preload-22"></div>
    <div id="preload-23"></div>
    <div id="preload-24"></div>
    <div id="preload-25"></div>
    <div id="preload-26"></div>
    <div id="preload-27"></div>
    <div id="preload-31"></div>
    <div id="preload-32"></div>
    <div id="preload-33"></div>
    <div id="preload-34"></div>
    <div id="preload-35"></div>
    <div id="preload-36"></div>
    <div id="preload-37"></div>
    <div id="preload-41"></div>
    <div id="preload-42"></div>
    <div id="preload-43"></div>
    <div id="preload-44"></div>
    <div id="preload-45"></div>
    <div id="preload-46"></div>
    <div id="preload-47"></div>
    <div id="preload-100"></div>
    <div id="preload-101"></div>
    <div class="hide_box" id="testBox" style="padding-bottom: 0.6rem">
        <h4><a  id="close-box" href="javascript:void(0)" title="关闭窗口">&times;</a>养鸡指南</h4>
        <p class="word" style="margin-top: 0.5rem">1.喂养10000g 鸡饲料，即可养大一只鸡</p>
        <p class="word">2.每2小时可喂养一次，每次可喂养20g饲料</p>
        <p class="word">3.养大的鸡，可以兑换一只真实的散养土鸡</p>
        <p class="word" style="margin-bottom: 0.5rem">4.鸡饲料可以通过在app里消费获得</p>
    </div>
</div>
</body>
<script src="/resource/js/progress.js"></script>
<script src="/resource/js/jquery.min.js"></script>
<script src="/resource/js/easydialog.js"></script>
<script>

    var lastFeedTime=${lastFeedTime};

    var level0 = 2000,level1 = 4000,level2 = 6000,level3 = 8000,level4 = 10000;
    var a = "${chick.userId}";
    var leftPoints = parseInt("${chick.dailyLimitPoints}");
    var chickPoints = '${chick}'?'${chick.chickPoints/100}':0;
    chooseChick(chickPoints*100);
    console.log(chickPoints);
    // var result = document.getElementsByClassName('result')[0];
    var progressdiv = document.getElementById("chick-status");
    var progressWidth = progressdiv.style.width || progressdiv.clientWidth || progressdiv.offsetWidth || progressdiv.scrollWidth;
    var progressHeight = progressdiv.style.height || progressdiv.clientHeight || progressdiv.offsetHeight || progressdiv.scrollTop;
    // console.log(progressWidth);
    // console.log(progressHeight);
    // console.log(document.getElementById("chick-status"));
    var pro = new progress({
        width : progressWidth,//进度条宽度
        height: progressHeight,//进度条高度
        bgColor : "#6B4A2B",//背景颜色
        proColor : "#FF4040",//前景颜色
        fontColor : "#FFFFFF",//显示字体颜色
        val : chickPoints,//默认值
        // text:"#*val*#%",//显示文字信息
        showPresent : true,
        completeCallback:function(val){
            console.log('已完成');
            // result.innerHTML = '已完成';
        },
        changeCallback:function(val){
            console.log('当前进度为'+val+'%');
            // result.innerHTML = val;
        }
    });

    // console.log(pro.width);
    document.getElementsByClassName('pro')[0].appendChild(pro.getBody());


    // pro.update(50);


    var userPointsId = '${userPoints.id}';
    var feedtime =0;
    if(new Date().getTime()-lastFeedTime<2*60*60*1000){
        feedtime = 1;
        chooseChickFeed(chickPoints*100);
        setInterval(function () {
            if(new Date().getTime()-lastFeedTime>=2*60*60*1000){
                feedtime=0;
                endEating(chickPoints*100);
            }
        },2000);
    }


    $("#food").on("click",function () {
        if(feedtime==1){
            toast("喂得太频繁了，要消化不良");
            return false;
        }
        if(leftPoints<100){
            toast("我已经吃饱了，明天再来喂我吧");
            return false;
        }

        feedtime=1;
        // setTimeout(function () {
        //    feedtime=0;
        // },2200);
        // toast("您点击了坦克",2000)
        $.post("/chick/feed/"+userPointsId,function (data) {
            var result = JSON.parse(data);
            if(result.code==-1){
                toast("积分不足，马上去获得更多积分");
            }
            if(result.code==-2){
                toast("我已经吃饱了，明天再来喂我吧");
            }
            if(result.code==1){
                chooseChickFeed(chickPoints*100);
                $("#gift-word").text("X "+result.chick.mature);
                $("#food-detail").text(result.userPoints.points);
                chickPoints=result.chick.chickPoints/100;
                // if(chickPoints*100==level0 ||chickPoints*100==level1||chickPoints*100==level2||chickPoints*100==level3||chickPoints*100==level4||chickPoints==0){
                //     setTimeout(function (){chooseChick(chickPoints*100)},1800);
                // }
                leftPoints = result.chick.dailyLimitPoints;
                pro.update(result.chick.chickPoints/100);
            }
        });
    });


    function chooseChick(points){
        $("#chick").removeClass();
        if(points<level0){
            $("#chick").addClass("child0blick");
        }
        if(points>=level0 && points<level1){
            $("#chick").addClass("child1blick");
        }
        if(points>=level1 && points<level2){
            $("#chick").addClass("child2blick");
        }
        if(points>=level2 && points<level3){
            $("#chick").addClass("child3blick");
        }
        if(points>=level3 && points<level4){
            $("#chick").addClass("child4blick");
        }
    }
    function chooseChickFeed(points){
        $("#chick").removeClass();

        // $("#rice").removeClass();
        // $("#rice").addClass("riceEating");
        if(points<level0){
            $("#chick").addClass("eat0blick");
        }
        if(points>=level0 && points<level1){
            $("#chick").addClass("eat1blick");
        }
        if(points>=level1 && points<level2){
            $("#chick").addClass("eat2blick");
        }
        if(points>=level2 && points<level3){
            $("#chick").addClass("eat3blick");
        }
        if(points>=level3 && points<level4){
            $("#chick").addClass("eat4blick");
        }
        // setTimeout(function (){chooseChick(points);
        //     $("#rice").removeClass();
        //     $("#rice").addClass("empty");},2000);
    }

    function endEating(points){
        chooseChick(points);
        // $("#rice").removeClass();
        // $("#rice").addClass("empty");
    }

    $("#gift").click(function () {
        if(parseInt('${chick.mature}')>0){
            window.location.href='/chick/change?userId='+'${chick.userId}';
        }else {
            toast("没有可兑换的小鸡");
        }
    });
    $("#remark").click(function () {
        easyDialog.open({
            container : 'testBox'
        });
        <%--if(parseInt('${chick.mature}')>0){--%>
        //     window.location.href='/remark.html';
        // }else {
        //     toast("没有可兑换的小鸡");
        // }
    });
    $("#close-box").click(function () {
        easyDialog.close();
        <%--if(parseInt('${chick.mature}')>0){--%>
        //     window.location.href='/remark.html';
        // }else {
        //     toast("没有可兑换的小鸡");
        // }
    });


    //自定义弹框
    function toast(msg,duration){
        duration=isNaN(duration)?3000:duration;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText="width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:20px; position:fixed; top:80%; left:20%; z-index:999999; font-weight:bold;";
        document.body.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() { document.body.removeChild(m) }, d * 1000);
        }, duration);
    }


    // chooseChick(chickPoints*200);
</script>
</html>
